{include file="public/head"}

<body>
<style>
    .goodsname{
        text-align: center;
        margin: 5px 0;
        font-size: 1.6rem;
        font-weight: bold;
        color: #000;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .goodsprice{
        color: #888888;
        text-align: center;
    }
    .goodsbtn{
        background: #282727;
        position: absolute;
        top: 15rem;
        display: flex;
        width: 89%;
        justify-content: center;
        height: 5rem;
        align-items: center;
    }
    .goodsbtn a{
        margin: 0;
        border: 1px solid;
        padding: 2% 0;
        text-align: center;
        width: 9rem;
        color: #fff;
    }
    .goodsbtn .cart{
        background-color: #e7505a;
        border-color: #e7505a;
        margin-left: 2rem;
    }
    .goodsbtn .detail:hover{
        background: #fff;
        color: #777;
    }
    .goodsbtn .cart:hover{
        background: #bf0915;
        border-color: #bf0915;
    }
</style>
<div id="wrapper">
    {include file="public/menu"}

    <div id="page-wrapper" class="gray-bg dashbard-1">
        {include file="public/nav"}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>购物</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="{:url('User/Panel')}">主页</a>
                    </li>
                    <li>
                        <a>商城购物</a>
                    </li>
                    <li>
                        <strong>商城购物</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>商品列表</h5>
                            <div class="ibox-tools">
                                <small>共 {$Count} 条</small>
                            </div>
                        </div>

                        <div class="ibox-content">
                            <div class="row">
                                {volist name="goods" id="v"}
                                <div class="col-md-4 col-lg-3 col-sm-6" style="position: relative">
                                    <img src="{$v.logo_url}" alt="" style="width: 100%;height: 20rem">
                                    <div class="goodsbtn">
                                        <a class="detail" href="{:url('Goods/GoodsDetail')}?id={$v.id}">详情</a>
<!--                                        <a class="cart" onclick="add_cart(this,{$v.id})">加入购物车</a>-->
                                        <a class="cart" href="{:url('Order/Confirm')}?goods_id={$v.id}">购买</a>
                                    </div>
                                    <div   class="goodsname">{$v.name}</div>
                                    <div class="goodsprice">{$v.price}</div>
                                </div>
                                {/volist}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {include file="public/foot"}

    </div>
</div>
</div>
{include file="public/footer"}
<script>

    /*商品-删除*/
    function add_cart(obj,id){
        $.ajax({
            type:"post",
            url:"{:url('Order/AddCart')}",
            data:{
                id:id,
            },
            dataType:"json",
            beforeSend:function(){
                loadingIndex = layer.load(2, { //icon支持传入0-2
                    shade: [0.5, 'gray'], //0.5透明度的灰色背景
                    content: '加载中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '39px',
                            'width': '60px'
                        });
                    }
                });
            },
            success:function(data){
                layer.close(loadingIndex)
                if(data.status == 1){
                    var count = data.data.count
                    $("#cart_tips").html(`<i class="fa fa-cart-plus"></i><span class="label label-warning">${count}</span>`)
                    var str = ``
                    var cart = data.data.cart
                    for(let i = 0;i<cart.length;i++){
                        str += `<li>
                        <div class="dropdown-messages-box">
                            <a href="" class="pull-left">
                                <img alt="image" class="img-circle" src="${cart[i]['goods']['logo_url']}">
                            </a>
                            <div class="media-body">
<!--                                <small class="pull-right">46小时前</small>-->
                                <strong>${cart[i]['goods']['name']}</strong>
                                <br>
                                <small class="text-muted">￥${cart[i]['goods']['price']} * ${cart[i]['num']}</small>
                            </div>
                        </div>
                    </li>
                    <li class="divider"></li>`;
                    }
                    str += ` <li>
                        <div class="text-center link-block">
                            <a href="{:url('Order/Cart')}">
                                <strong> 去结算</strong>
                            </a>
                        </div>
                    </li>`;
                    $("#cart_drop").html(str)
                }else{
                    layer.msg(data.message,{icon: 5,time:1500});
                }
            }
        });
    }
</script>
</body>
</html>
